<template>
  <view class="wrap">
    <scroll-view
      :scroll-top="state.scrollTop"
      scroll-y="true"
      class="scroll-Y scroll"
      @scroll="scroll"
      id="view1"
    >
      <view>
        <view class="header headerName">
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/knowledgeBg.png" alt="" />
          <view class="title">关于血糖</view>
          <view class="subtitle">了解健康知识，我的健康我做主</view>
        </view>
        <scroll-view :class="['scroll-X', state.scrollActive == true ? 'on' : '']" scroll-x="true">
          <view class="tabList">
            <view
              :class="['item', state.tabActive == index ? 'on' : '']"
              v-for="(item, index) in state.tabList"
              :key="index"
              @tap="tabFun(index)"
            >
              <text class="text">{{ item.name }}</text>
              <text class="text" />
            </view>
          </view>
        </scroll-view>
        <view class="content itemName itemName1">
          <view class="title">
            <text class="name">概述</text>
            <img class="img" src="https://ainengli.hzjrsw.com/jkhx/common/title-bg-row.png" alt="" />
          </view>
          <text class="content-item">
            血糖（Glu）指血中的葡萄糖浓度。葡萄糖是人体的重要组成成分，也是能量的重要来源，血糖必须保持一定的水平才能维持体内各器官和组织的正常运作。正常人血糖的产生和利用处于动态平衡的状态，维持在一个相对稳定的水平，但在某些疾病或因素的影响下，血糖会出现波动。
          </text>
        </view>
        <view class="content itemName itemName2">
          <view class="title">
            <text class="name">正常范围</text>
            <img class="img" src="https://ainengli.hzjrsw.com/jkhx/common/title-bg-row.png" alt="" />
            <text class="unit"> 单位：(mmol/L) </text>
          </view>
          <view class="table-box">
            <view class="rows">
              <view class="rows-item rows-header">各类血糖情况</view>
              <view class="rows-item">正常人</view>
              <view class="rows-item">孕妇</view>
            </view>
            <view class="rows">
              <view class="rows-item rows-header">空腹血糖</view>
              <view class="rows-item">3.9-6.1</view>
              <view class="rows-item">3.1-5.1</view>
            </view>
            <view class="rows">
              <view class="rows-item rows-header">餐后2小时血糖</view>
              <view class="rows-item">3.9-7.8</view>
              <view class="rows-item">≤8.5</view>
            </view>
          </view>
        </view>
        <view class="content itemName itemName3">
          <view class="title">
            <text class="name">异常范围</text>
            <img class="img" src="https://ainengli.hzjrsw.com/jkhx/common/title-bg-row.png" alt="" />
          </view>
          <view class="define"><text>·血糖偏高范围</text></view>
          <view class="table-box">
            <view class="rows">
              <view class="rows-item rows-header">诊断</view>
              <view class="rows-item rows-header">条件</view>
              <view class="rows-item rows-header">血糖范围（单位mmol/L）</view>
            </view>
            <view class="rows rows-high">
              <view class="rows-item">
                <text class="rows-item-text">糖尿病</text>
              </view>
              <view class="rows-item rows-item-Two">
                <view class="rows-item-col">
                  <text class="rows-item-text">空腹</text>
                </view>
                <view class="rows-item-col">
                  <text class="rows-item-text">餐后2小时血糖</text>
                </view>
              </view>
              <view class="rows-item rows-item-Two">
                <view class="rows-item-col"><text class="rows-item-text">≥6.1</text></view>
                <view class="rows-item-col"><text class="rows-item-text">≥10.0</text></view>
              </view>
            </view>
            <view class="rows rows-high">
              <view class="rows-item"> <text class="rows-item-text">糖耐量受损</text></view>
              <view class="rows-item rows-item-Two">
                <view class="rows-item-col">
                  <text class="rows-item-text">空腹</text>
                </view>
                <view class="rows-item-col">
                  <text class="rows-item-text">餐后2小时血糖</text>
                </view>
              </view>
              <view class="rows-item rows-item-Two">
                <view class="rows-item-col"
                  ><text class="rows-item-text">{{ '＜6.1' }}</text></view
                >
                <view class="rows-item-col"><text class="rows-item-text">6.7-10.0</text></view>
              </view>
            </view>
            <view class="rows rows-high">
              <view class="rows-item"> <text class="rows-item-text">空腹血糖受损</text></view>
              <view class="rows-item rows-item-Two">
                <view class="rows-item-col">
                  <text class="rows-item-text">空腹</text>
                </view>
                <view class="rows-item-col">
                  <text class="rows-item-text">餐后2小时血糖</text>
                </view>
              </view>
              <view class="rows-item rows-item-Two">
                <view class="rows-item-col"><text class="rows-item-text">5.6-6.1</text></view>
                <view class="rows-item-col"
                  ><text class="rows-item-text">{{ '＜6.7' }}</text></view
                >
              </view>
            </view>
          </view>
          <view class="define"><text>·血糖偏低范围</text></view>
          <view class="table-box">
            <view class="rows">
              <view class="rows-item rows-header">人群</view>
              <view class="rows-item rows-header">血糖范围（单位mmol/L）</view>
            </view>
            <view class="rows">
              <view class="rows-item">正常人</view>
              <view class="rows-item">{{ '<2.8' }}</view>
            </view>
            <view class="rows">
              <view class="rows-item">糖尿病患者</view>
              <view class="rows-item">{{ '<4' }}</view>
            </view>
          </view>
        </view>
        <view class="content itemName itemName4">
          <view class="title">
            <text class="name">就医指征</text>
            <img class="img" src="https://ainengli.hzjrsw.com/jkhx/common/title-bg-row.png" alt="" />
          </view>
          <text class="content-item">（1）血糖偏高：血糖升高可出现的症状如下：</text>
          <text class="content-item">1、口干、多饮、多尿；</text>
          <text class="content-item">2、食欲亢进、易饥饿；</text>
          <text class="content-item">3、乏力、体重减轻；</text>
          <text class="content-item">4、视物模糊；</text>
          <text class="content-item">5、手术时血糖升高；</text>
          <text class="content-item"
            >6、皮肤容易发生瘙痒、下肢皮肤出现磕痕、伤口经久不愈、组织易发炎，如牙周炎等。有些患者还可能会伴有四肢酸痛、四肢麻木、腰痛、性欲减退、皮肤瘙痒、恶心、呕吐、口腔有烂苹果味，腹部不适、心跳加速、呼吸缓而深等症状。</text
          >
          <text class="content-item">
            （2）血糖偏低：对于非糖尿病患者，反复出现面色苍白、手抖、出汗、心悸等症状，但是进食后症状缓解时，应及时到医院就诊。对于糖尿病患者，如家中测血糖发现血糖＜4mmol/L，应到医院就诊。
          </text>
          <text class="content-item">就诊科室: 内分泌科</text>
        </view>
        <view class="content itemName itemName5">
          <view class="title">
            <text class="name">日常生活建议</text>
            <img class="img" src="https://ainengli.hzjrsw.com/jkhx/common/title-bg-row.png" alt="" />
          </view>
          <text class="content-item">1）血糖偏高 </text>
          <text class="content-item"
            >1.饮食：控制主食摄入，控制大米、面粉等主食的摄入，增加绿豆等杂粮的摄入；增加新鲜蔬菜的摄入，每日摄入量最好在500g左右，其中深色蔬菜应当在一半以上；增加食物的丰富程度，可增加豆制品、坚果、酸奶等食物的摄入。不宜喝含糖饮料，减少油脂摄入，限制盐、酱油的用量，避免食用烟熏、烘烤等加工肉类产品。
          </text>
          <text class="content-item"
            >2.运动：通过运动控制体重，应当避免运动过于激烈、身体条件适宜者可在医生的指导下每周进行150min的中等强度运动，但血糖过高、血糖极度不稳、血压过高等身体条件不适宜的患者不宜运动。
          </text>
          <text class="content-item">3.戒烟戒酒 </text>
          <text class="content-item">2）血糖偏低 </text>
          <text class="content-item">1.饮食 </text>
          <text class="content-item"
            >发现血糖偏低后，饮食上需要注意规律进食三餐，随身携带一些高糖食物如奶糖、巧克力、饼干等以便在出现血糖降低后及时补充。
          </text>
          <text class="content-item">2.运动 </text>
          <text class="content-item"
            >除饮食外，日常生活中还可注意避免空腹运动，运动也不宜过于激烈，尤其应当避免跑步、爬楼梯等剧烈运动。
          </text>
        </view>
        <view class="content itemName itemName6">
          <view class="title">
            <text class="name">参考文献</text>
            <img class="img" src="https://ainengli.hzjrsw.com/jkhx/common/title-bg-row.png" alt="" />
          </view>
          <text class="content-item"
            >[1]王吉耀，葛均波，邹和建.实用内科学：下册[M].16版.北京：人民卫生出版社，2022.
          </text>
          <text class="content-item">[2]中国2型糖尿病防治指南（2020版） </text>
          <text class="content-item">[3]中国老年2型糖尿病防治临床指南（2022年版） </text>
          <text class="content-item"
            >[4]隽娟,杨慧霞.美国糖尿病学会2023年“妊娠合并糖尿病诊治指南”解读[J].中华围产医学杂志,2023,26(4):265-269.DOI:10.3760/cma.j.cn113903-20230220-00077.
          </text>
          <text class="content-item"
            >[5]侯志慧.血糖的检测与血糖升高的原因[J].医药与保健,2016,024(010):192-193.</text
          >
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
const state = reactive({
  tabList: [
    { name: '概述' },
    { name: '正常范围' },
    { name: '异常范围' },
    { name: '就医指征' },
    { name: '日常生活建议' },
    { name: '参考文献' }
  ],
  scrollActive: false,
  tabActive: 0,
  title: '',
  type: '',
  scrollTop: 0
})

const distanceArr = ref([])

onShow(() => {
  nextTick(() => {
    getDistanceArr()
  })
})

// 获取所有元素在当前页面所处的位置信息
const getDistanceArr = () => {
  uni
    .createSelectorQuery()
    .select('.itemName1')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()

  uni
    .createSelectorQuery()
    .select('.itemName2')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  uni
    .createSelectorQuery()
    .select('.itemName3')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  uni
    .createSelectorQuery()
    .select('.itemName4')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()

  uni
    .createSelectorQuery()
    .select('.itemName5')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  uni
    .createSelectorQuery()
    .select('.itemName6')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
  uni
    .createSelectorQuery()
    .select('.itemName7')
    .boundingClientRect((res) => {
      distanceArr.value.push(res.top)
    })
    .exec()
}

const tabFun = (index) => {
  // 方法一 简单一点直接跳转到id对应的位置
  nextTick(() => {
    if (index == 0) {
      state.scrollTop = 0
      state.tabActive = 0
    } else {
      state.tabActive = index
      if (uni.getSystemInfoSync().uniPlatform == 'mp-weixin') {
        state.scrollTop = distanceArr.value[index] - 105
      } else {
        state.scrollTop = distanceArr.value[index] - 65
      }
    }
    const timer = setTimeout(() => {
      clearTimeout(timer)
    }, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
  })
}
const scroll = (e) => {
  const skewY = 170 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
  if (e.detail.scrollTop >= skewY) {
    if (!state.scrollActive && state.tabActive <= 0) {
      // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
      state.tabActive = 0
    }
    state.scrollActive = true

    nextTick(() => {
      const length = distanceArr.value.length
      const index = distanceArr.value.findIndex((el) => el - skewY - e.detail.scrollTop > 0)
      // 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
      // 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
      if (e.detail.scrollTop + 600 > distanceArr.value[length - 1]) {
        return
      } else {
        state.tabActive = index > 0 ? index - 1 : length - 1
      }
    })
  } else {
    state.scrollActive = false
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  .header {
    position: relative;
    display: inline-block;
    width: calc(100% - 64rpx);
    height: 180rpx;
    margin: 32rpx 32rpx 0;

    .img {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .title {
      position: relative;
      z-index: 1;
      margin: 30rpx 40rpx 20rpx;
      font-size: 40rpx;
      font-weight: 700;
      color: #fff;
    }

    .subtitle {
      position: relative;
      z-index: 1;
      margin: 0 40rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }

  .scroll-Y {
    box-sizing: border-box;
    height: 100vh;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  }

  .scroll-X {
    width: calc(100% - 64rpx);
    margin: 30rpx 32rpx 0;
    overflow-x: scroll;
    background: #f3f7f8;

    &.on {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      display: block;
      width: 100%;
      padding: 30rpx 0;
      margin: 0;

      .tabList {
        padding: 0 16rpx;
      }
    }

    .tabList {
      white-space: nowrap;

      .item {
        position: relative;
        display: inline-block;
        height: 64rpx;
        padding: 0 30rpx;
        margin-right: 32rpx;
        font-size: 28rpx;
        line-height: 64rpx;
        color: #222;
        text-align: center;
        vertical-align: middle;
        background: #fff;
        border-radius: 32rpx;

        &:nth-last-child(1) {
          margin-right: 0;
        }

        &.on {
          font-weight: 700;
          color: #fff;
          background: #00d1b6;
        }
      }
    }
  }

  .content {
    padding: 32rpx;
    margin: 30rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;

    .title {
      position: relative;
      margin-bottom: 20rpx;

      .name {
        position: relative;
        z-index: 1;
        font-size: 34rpx;
        font-weight: 700;
        color: #222;
      }

      .img {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 40rpx;
        height: 12rpx;
      }

      .unit {
        position: absolute;
        top: 50%;
        right: 0;
        font-size: 24rpx;
        color: #666;
        transform: translateY(-50%);
      }
    }

    .content-item {
      display: block;
      margin-top: 20rpx;
      font-size: 30rpx;
      line-height: 1.6;
      color: #222;
      text-align: justify;
      word-break: break-all;
    }

    .define {
      padding: 10px 0 10px 10px;
      margin: 20px 0 10px;
      font-size: 32rpx;
      font-weight: 700;
      background: linear-gradient(90deg, rgb(2 188 195 / 5%) 0%, rgb(2 188 195 / 0%) 100%);
      border-radius: 4px;
    }

    .itemName {
      margin-bottom: 40rpx;
    }

    .itemName:last-child {
      margin-bottom: 0;
    }
  }
}

.table-box {
  width: 100%;
  border: 1rpx solid #cce4e1;

  .rows {
    display: flex;
    font-size: 28rpx;

    .rows-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      width: 100%;
      padding: 24rpx 16rpx;
      font-size: 28rpx;
      color: #222;
      border-right: 1rpx solid #cce4e1;
      // font-weight: 400;
      border-bottom: 1rpx solid #cce4e1;

      &.rows-item-Two {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;

        .rows-item-col {
          display: flex;
          flex: 1;
          align-items: center;
          //   height: 44rpx;
        }
      }

      .rows-item-col {
        width: 100%;
        padding: 24rpx 0;
        font-size: 24rpx;
        color: #222;
      }

      .rows-item-col:first-child {
        border-bottom: 1rpx solid #cce4e1;
      }
    }

    .rows-item:last-child {
      border-right-width: 0rpx;
    }

    .rows-header {
      font-weight: 600;
      color: #00d1b6;
      background: rgb(0 209 182 / 5%);
    }
  }

  .rows:last-child {
    .rows-item {
      border-bottom-width: 0rpx;
    }
  }

  .rows-high {
    .rows-item {
      padding: 24rpx 0;
    }

    .rows-item-text {
      padding: 0 16rpx;
    }
  }
}
</style>
